<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        wx.config({
            debug: true,
            appId: '{{config.appId}}',
            timestamp: {{config.timestamp}},
            nonceStr: '{{config.nonceStr}}',
            signature: '{{config.signature}}',
            jsApiList: ['chooseImage', 'previewImage', 'uploadImage']
        });
    </script>
</head>
<body>
    <button id="upload">upload</button>
    <form id="uploadForm" acttion="/upload" method="post">
        <input id="uploadFileId" type="hidden" name="fileId">
        <input name="openId" value="{{openId}}" type="hidden">
        {% csrf_token %}
    </form>
    <script>
        wx.ready(function(){
            var uploadEl = document.getElementById('upload');
            var form = document.getElementById('uploadForm');
            var fileInput = document.getElementById('uploadFileId');
            uploadEl.addEventListener('click', function(){
                wx.chooseImage({
                    success: function (res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表
                        wx.uploadImage({
                            localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                var serverId = res.serverId; // 返回图片的服务器端ID
                                fileInput.value = serverId;
                                form.submit();
                            }
                        });
                    }
                });
            }, false);
        });
    </script>
</body>
</html>